<template>
  <!-- 客户添加 -->
  <div class="contractInfo box">
    <el-divider content-position="left">{{
      $route.query.mode == "add" ? "添加客户" : "编辑客户"
    }}</el-divider>
    <div class="formBox">
      <el-form
        :model="form"
        :rules="rules"
        ref="addForm"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="客户名称" prop="customerName">
          <el-input
            v-model.trim="form.customerName"
            clearable
            placeholder="请输入客户名称"
            @blur="searchCustomer"
          ></el-input>
        </el-form-item>
        <el-form-item label="客户类型" prop="customertype">
          <!-- <el-input v-model="form.customertype" clearable></el-input> -->
          <el-select
            v-model="form.customertype"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in customTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人" prop="firstcontacter">
          <el-input
            v-model="form.firstcontacter"
            clearable
            placeholder="请输入联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系人号码" prop="phone">
          <el-input
            v-model="form.phone"
            clearable
            placeholder="请输入联系人号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="座机号码">
          <el-input
            v-model="form.telephone"
            clearable
            placeholder="请输入座机号码"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            v-model="form.email"
            clearable
            placeholder="请输入客户邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input
            v-model="form.fax"
            clearable
            placeholder="请输入客户邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="法定代表人">
          <el-input
            v-model="form.legalAdmin"
            clearable
            placeholder="请输入客户邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="公司性质">
          <el-select
            v-model="form.natureofbusiness"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in companyTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="行业">
          <el-select
            v-model="form.profession"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in professionList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="员工人数">
          <el-input
            v-model="form.numberofemployees"
            clearable
            placeholder="请输入员工人数"
          ></el-input>
        </el-form-item>
        <el-form-item label="开户行名称">
          <el-input
            v-model="form.bankName"
            clearable
            placeholder="请输入开户行名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="银行账号">
          <el-input
            v-model="form.bankAccount"
            clearable
            placeholder="请输入银行账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select
            v-model="form.paymethod"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in paymethodTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="结算方式">
          <el-select
            v-model="form.settlement"
            placeholder="请选择"
            style="width: 100%"
            clearable
          >
            <el-option
              v-for="item in settlementOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="地址" style="width: 100%">
          <el-input
            v-model="form.address"
            clearable
            type="textarea"
            rows="2"
            placeholder="请输入地址"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" style="width: 100%">
          <el-input
            v-model="form.memo"
            clearable
            type="textarea"
            rows="3"
            placeholder="请输入备注内容"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- 审核流程项 -->
      <check-form-item
        ref="checkFormItem"
        @setCheckConfig="setCheckConfig"
        :field="this.form"
        :checkType="checkType"
        v-if="$route.query.mode == 'add'"
      ></check-form-item>

      <div class="button">
        <el-button type="primary" @click="save" :loading="isSaveing"
          >保 存</el-button
        >
        <el-button @click="cencel">取 消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { queryTypeByDic } from '@/utils/getData'
// import { verifyPhone } from '@/utils/verificate'
import checkFormItem from '@/components/checkProcess/checkFormItem.vue'
export default {
  name: 'customerAdd',
  data () {
    return {
      checkType: 10,//工作流的类型
      isSaveing: false,
      selectCustomerLoading: false,
      //表单数据
      form: {
        customerName: "",
        customertype: '',
        departmentId: '',
        adminId: '',
        phone: "",
        telephone: '',
        email: "",
        fax: '',//传真
        legalAdmin: '',//法定代表人
        firstcontacter: "",//联系人
        memo: "",//备注
        natureofbusiness: 1,//公司性质
        profession: '',//行业
        numberofemployees: '',//员工人数
        bankName: '',//开户行名称
        bankAccount: '',//银行账号
        paymethod: '',//支付方式
        // settlement: 1,//结算方式
        address: "",
        exempt: '',//是否免审
        workflowJsonList: []
      },
      customTypeOptions: [], // 客户类型 
      companyTypeOptions: [], // 企业性质
      professionList: [],//行业列表
      paymethodTypeOptions: [],// 付款方式
      settlementOptions: [{ name: '现结', value: 1 }, { name: '月结', value: 2 }],
      //验证规则
      rules: {
        customerName: [
          { required: true, message: '请输入客户名称' }
        ],
        customertype: [
          { required: true, message: '请选择客户类型', trigger: 'change' }
        ],
        firstcontacter: [
          { required: true, message: '请输入联系人姓名' }
        ],
        phone: [
          { required: true, message: '请输入联系人号码' },
        ]
      }
    }
  },
  components: {
    checkFormItem
  },
  mounted () {
    this.getType()
    if (this.$route.query.mode == 'edit') {
      this.getCustomerById()
    }

  },
  methods: {
    // 获取类型
    async getType () {
      // 客户类型
      this.customTypeOptions = await queryTypeByDic('customerType')
      this.form.customertype = this.customTypeOptions[0].value
      // 企业性质
      this.companyTypeOptions = await queryTypeByDic('companyType')
      // this.form.natureofbusiness = this.companyTypeOptions[0].value
      //行业类型
      this.professionList = await queryTypeByDic('industryType')
      this.form.profession = this.professionList[0].value
      // 付款方式
      this.paymethodTypeOptions = await queryTypeByDic('payment')
      this.form.paymethod = this.paymethodTypeOptions[0].value
    },
    // 审批流配置
    setCheckConfig (list, exempt) {
      this.form.workflowJsonList = list
      this.form.exempt = exempt
    },
    // 获取客户信息
    async getCustomerById () {
      let { data } = await this.$API.customer.getCustomerById.get({ id: this.$route.query.id })
      this.form = data
    },

    // 搜索客户 是否已存在
    searchCustomer () {
      this.$API.customer.searchCustomer.post({ name: this.form.customerName })

    },

    async save () {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true
          let userInfo = this.$TOOL.data.get('USER_INFO')
          this.form.departmentId = userInfo.departmentId
          this.form.adminId = userInfo.userId
          let res = null
          let mode = this.$route.query.mode
          if (mode == 'add') {
            res = await this.$API.customer.addCustomer.post(this.form)
          } else if (mode == 'edit') {
            delete this.form.status
            delete this.form.deleted
            delete this.form.createTime
            delete this.form.updateTime
            res = await this.$API.customer.editCustomer.post(this.form)
          }
          this.isSaveing = false
          if (res.code == 200) {
            this.closeSelectedTag(this.$route)
            this.$router.push({
              path: '/customer/customerManagement'
            })
            this.$message.success("操作成功")
          }
        }
      })
    },

    // 取消客户添加
    cencel () {
      this.closeSelectedTag(this.$route)
      this.$router.push({
        path: '/customer/customerManagement'
      })
    },
    //关闭tag
    closeSelectedTag (tag) {
      this.$store.commit("removeViewTags", tag)
      this.$store.commit("removeIframeList", tag)
      this.$store.commit("removeKeepLive", tag.name)
    },
  }

}

</script>
<style lang='scss' scoped>
.box {
  margin: 10px;
}

.formBox {
  padding: 30px;
  background: #fff;
  .el-form {
    width: 100%;
  }
}
.button {
  margin-top: 50px;
  padding-left: 60px;
}

:deep(.el-divider__text) {
  padding: 0 10px;
  font-size: 18px;
  // font-weight: 600;
  background-color: #f6f8f9;
}
</style>